<template>
  <div class="main">
    <div class="left">
      <studentMainleft></studentMainleft>
    </div>
    <div class="right">
      <div class="edit" v-if="user.PositionId==6">
        <el-row :gutter="16">
          <el-col :span="4">
            <el-select v-model="value" placeholder="请选择班级">
              <el-option
                v-for="item in options"
                :key="item.Id"
                :label="item.ClassId"
                :value="item.ClassId"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="serch()">查询</el-button>
          </el-col>
          <el-col :span="2">
            <vue-xlsx-table @on-select-file="uploadCourse">上传课表</vue-xlsx-table>
          </el-col>
        </el-row>
      </div>
      <div class="week">
        <span>第{{dateobj.week}}周：</span>
        <el-date-picker
          type="date"
          v-model="date"
          placeholder="选择日期"
          style="width: 30%;"
          @input="TodayInfo()"
        ></el-date-picker>
      </div>
      <template>
        <el-tabs v-model="activeName">
          <el-tab-pane label="显示课表" name="first">
            <div id="coursesTable"></div>
          </el-tab-pane>
          <el-tab-pane label="上传课表管理" name="second" v-if="coursTable!=''">
            <template>
              <el-table :data="coursTable" style="width: 100%" max-height="500">
                <el-table-column prop="ClassId" label="班级编号" width="180">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.ClassId"
                      v-if="scope.row.seen == true"
                      @blur="loseFcous(scope.$index, scope.row)"
                    ></el-input>

                    <span style="margin-left: 10px" v-else>{{ scope.row.ClassId }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="CollegeId" label="学院编号" width="100"><template slot-scope="scope">
                    <el-input
                      v-model="scope.row.CollegeId"
                      v-if="scope.row.seen == true"
                      @blur="loseFcous(scope.$index, scope.row)"
                    ></el-input>

                    <span style="margin-left: 10px" v-else>{{ scope.row.CollegeId }}</span>
                  </template></el-table-column>
                <el-table-column prop="SchedulePlace" label="教室"><template slot-scope="scope">
                    <el-input
                      v-model="scope.row.SchedulePlace"
                      v-if="scope.row.seen == true"
                      @blur="loseFcous(scope.$index, scope.row)"
                    ></el-input>

                    <span style="margin-left: 10px" v-else>{{ scope.row.SchedulePlace }}</span>
                  </template></el-table-column>
                <el-table-column prop="ScheduleWeek" label="星期"><template slot-scope="scope">
                    <el-input
                      v-model="scope.row.ScheduleWeek"
                      v-if="scope.row.seen == true"
                      @blur="loseFcous(scope.$index, scope.row)"
                    ></el-input>

                    <span style="margin-left: 10px" v-else>{{ scope.row.ScheduleWeek }}</span>
                  </template></el-table-column>
                <el-table-column prop="ScheduleWeekly" label="周次"><template slot-scope="scope">
                    <el-input
                      v-model="scope.row.ScheduleWeekly"
                      v-if="scope.row.seen == true"
                      @blur="loseFcous(scope.$index, scope.row)"
                    ></el-input>

                    <span style="margin-left: 10px" v-else>{{ scope.row.ScheduleWeekly }}</span>
                  </template></el-table-column>
                <el-table-column prop="ScheduleWhat" label="节次"><template slot-scope="scope">
                    <el-input
                      v-model="scope.row.ScheduleWhat"
                      v-if="scope.row.seen == true"
                      @blur="loseFcous(scope.$index, scope.row)"
                    ></el-input>

                    <span style="margin-left: 10px" v-else>{{ scope.row.ScheduleWhat }}</span>
                  </template></el-table-column>
                <el-table-column prop="SchoolSemester" label="学年学期"><template slot-scope="scope">
                    <el-input
                      v-model="scope.row.SchoolSemester"
                      v-if="scope.row.seen == true"
                      @blur="loseFcous(scope.$index, scope.row)"
                    ></el-input>

                    <span style="margin-left: 10px" v-else>{{ scope.row.SchoolSemester }}</span>
                  </template></el-table-column>
                <el-table-column prop="SchoolSemester" label="学年学期"><template slot-scope="scope">
                    <el-input
                      v-model="scope.row.SchoolSemester"
                      v-if="scope.row.seen == true"
                      @blur="loseFcous(scope.$index, scope.row)"
                    ></el-input>

                    <span style="margin-left: 10px" v-else>{{ scope.row.SchoolSemester }}</span>
                  </template></el-table-column>
                <el-table-column prop="WorkerId" label="授课老师"><template slot-scope="scope">
                    <el-input
                      v-model="scope.row.WorkerId"
                      v-if="scope.row.seen == true"
                      @blur="loseFcous(scope.$index, scope.row)"
                    ></el-input>

                    <span style="margin-left: 10px" v-else>{{ scope.row.WorkerId }}</span>
                  </template></el-table-column>
                <el-table-column  label="操作">
                  <template slot-scope="scope">
                     <el-link type="primary" @click="cellClick(scope.row)" v-if="scope.row=='false'||scope.row==false">编辑</el-link>
                     <el-link type="primary" @click="cellClick(scope.row)" >完成</el-link>
                     <el-link type="primary" @click="deletecourse(scope.$index)">删除</el-link>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-tab-pane>
        </el-tabs>
      </template>
    </div>
  </div>
</template>
<script>
import studentMainleft from "@/components/studentMainleft";
import Timetables from "timetables";
import { TodayInfo } from "../../static/js/datautils.js";
import { Loading } from "element-ui";
export default {
  components: {
    studentMainleft
  },
  data() {
    return {
      coursTable: [],
      activeName: "first",
      value: "",
      options: [],
      classId: "",
      dateobj: "",
      date: "",
      input: "",
      timetables: [
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""]
      ],
      timetableType: [
        [{ index: "1", name: "第一大节" }, 2],
        [{ index: "2", name: "第二大节" }, 2],
        [{ index: "3", name: "第三大节" }, 2],
        [{ index: "4", name: "第四大节" }, 2]
      ],
      week: ["周一", "周二", "周三", "周四", "周五"],
      styles: {
        Gheight: 60,
        leftHandWidth: 90,
        palette: ["#ff6633", "#eeeeee"]
      },
      user: null
    };
  },

  async created() {
    this.defultdate();
    this.GetCourseById();
    this.GetAllClasses();
  },

  mounted() {
    const loading = this.$loading({
      // 声明一个loading对象
      lock: true, // 是否锁屏
      text: "正在加载...", // 加载动画的文字
      spinner: "el-icon-loading", // 引入的loading图标
      background: "rgba(0, 0, 0, 0.3)", // 背景颜色
      target: ".sub-main", // 需要遮罩的区域
      body: true,
      customClass: "mask" // 遮罩层新增类名
    });
    setTimeout(() => {
      //code
      this.timetable = new Timetables({
        el: "#coursesTable",
        timetables: this.timetables,
        week: this.week,
        timetableType: this.timetableType,
        styles: this.styles
      });
      loading.close();
    }, 1000);
  },
  methods: {
    cellClick(row, column) {
      row.seen = Boolean(row.seen)
      row.seen = !row.seen;
    },
    loseFcous(index, row) {
      row.seen = false;
    },
    deletecourse(index,row) {
      this.coursTable.splice(index,1)
    },
    serch() {
      this.$axios({
        method: "get",
        url: this.$api.GetSchedultByClassId,
        params: { classId: this.value }
      }).then(res => {
        console.log(res);
        var course = res.data.message;
        var jsoncourse = JSON.stringify(course);
        sessionStorage.setItem("course", jsoncourse);
        this.TodayInfo();
      });
    },
    GetAllClasses() {
      this.$axios({
        method: "get",
        url: this.$api.GetAllClasses
      }).then(res => {
        this.options = res.data.message;
      });
    },
    uploadCourse(convertedData) {
      console.log(convertedData);
      this.coursTable = convertedData.body;
    },
    GetSchedultByClassId() {
      this.$axios({
        method: "get",
        url: this.$api.GetSchedultByClassId,
        params: { classId: this.classId }
      }).then(res => {
        console.log(res);
      });
    },
    GetCourseById() {
      this.user = JSON.parse(sessionStorage.getItem("user"));
      this.$axios({
        method: "get",
        url: this.$api.GetSchedultByToken,
        params: {
          Token: this.user.Token
        }
      }).then(res => {
        var course = res.data.message;
        var jsoncourse = JSON.stringify(course);
        sessionStorage.setItem("course", jsoncourse);
        //console.log("id");
        this.$options.methods.ChangeCourseByDate(this);
      });
    },
    //课表渲染
    ChangeCourseByDate(_this) {
      //console.log("1");
      var course = JSON.parse(sessionStorage.getItem("course"));
      var i = 0;
      var week = new Array();
      course.forEach(element => {
        if (element.ScheduleWeekly == _this.dateobj.week) {
          week[i++] = element;
        }
      });
      //console.log(week);
      week = Array.from(week);
      //console.log(week);
      week.forEach(element => {
        var w = element.ScheduleWeek;
        var ScheduleWhatat = element.ScheduleWhat * 2 - 1;
        for (var i = ScheduleWhatat; i > ScheduleWhatat - 2; i--) {
          _this.timetables[w - 1][i] =
            "课程" +
            element.Course +
            "    老师" +
            element.WorkerId +
            "    教室" +
            element.SchedulePlace;
          if (_this.user.StuId == null) {
            _this.timetables[w - 1][i] =
              _this.timetables[w - 1][i] + "    上课班级：" + element.ClassId;
          }
        }
      });
    },
    defultdate() {
      this.date = new Date();
      var td = TodayInfo(this.date);
      this.dateobj = td;
    },
    //当天日期
    TodayInfo() {
      var td = TodayInfo(this.date);
      this.dateobj = td;
      (this.timetables = [
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""]
      ]),
        this.ChangeCourseByDate(this);
      this.timetable.setOption({
        el: "#coursesTable",
        timetables: this.timetables,
        week: this.week,
        timetableType: this.timetableType,
        styles: this.styles
      });
    }
  }
};
</script>

<style scoped>
#coursesTable {
  width: 100%;
  height: 79%;
}
.right {
  width: 100%;
  background-color: white;
  height: 80%;
  margin-left: 10px;
}
.edit {
  margin: 13px 10px;
}
.week {
  margin: 13px 10px;
  display: flex;
  height: 40px;
  line-height: 40px;
}
.main {
  display: flex;
  height: 100%;
}
#coursesTable >>> #courseWrapper {
  border: 0px !important;
  border-top: 1px solid rgb(219, 219, 219) !important;
  height: 100%;
}
#coursesTable >>> #courseWrapper .Courses-content {
  height: 100% !important;
}
.el-col-2 >>> .vue-xlsx-container .xlsx-button {
  padding: 12px 11px !important;
  font-size: 14px !important;
}
</style>


